<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单数据列表查看</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            font-weight: 300;
        }
        
        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        .content {
            padding: 30px;
        }
        
        .search-section {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 30px;
            border: 1px solid #e9ecef;
        }
        
        .search-form {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: end;
        }
        
        .form-group {
            flex: 1;
            min-width: 200px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #495057;
        }
        
        .form-group input, .form-group select {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }
        
        .form-group input:focus, .form-group select:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .btn-secondary {
            background: #6c757d;
        }
        
        .btn-secondary:hover {
            box-shadow: 0 5px 15px rgba(108, 117, 125, 0.4);
        }
        
        .data-section {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }
        
        .data-header {
            background: #f8f9fa;
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .data-header h3 {
            color: #495057;
            font-size: 1.3em;
        }
        
        .refresh-btn {
            background: #28a745;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .refresh-btn:hover {
            background: #218838;
        }
        
        .table-container {
            overflow-x: auto;
        }
        
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        .data-table th {
            background: #f8f9fa;
            padding: 15px 12px;
            text-align: left;
            font-weight: 600;
            color: #495057;
            border-bottom: 2px solid #dee2e6;
        }
        
        .data-table td {
            padding: 15px 12px;
            border-bottom: 1px solid #e9ecef;
            color: #495057;
        }
        
        .data-table tr:hover {
            background: #f8f9fa;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #6c757d;
        }
        
        .loading .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            border: 1px solid #f5c6cb;
        }
        
        .success {
            background: #d4edda;
            color: #155724;
            padding: 15px;
            border-radius: 8px;
            margin: 20px 0;
            border: 1px solid #c3e6cb;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
            padding: 20px;
            background: #f8f9fa;
        }
        
        .pagination button {
            padding: 8px 12px;
            border: 1px solid #dee2e6;
            background: white;
            color: #495057;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        
        .pagination button:hover {
            background: #e9ecef;
        }
        
        .pagination button.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .pagination button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .stats {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        
        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            flex: 1;
            min-width: 200px;
            text-align: center;
        }
        
        .stat-card h4 {
            color: #6c757d;
            font-size: 0.9em;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .stat-card .number {
            font-size: 2em;
            font-weight: bold;
            color: #667eea;
        }
        
        @media (max-width: 768px) {
            .search-form {
                flex-direction: column;
            }
            
            .form-group {
                min-width: 100%;
            }
            
            .data-header {
                flex-direction: column;
                gap: 15px;
                align-items: stretch;
            }
            
            .stats {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📊 表单数据列表查看</h1>
            <p>查看和分析用户提交的表单数据</p>
        </div>
        
        <div class="content">
            <!-- 搜索筛选区域 -->
            <div class="search-section">
                <h3 style="margin-bottom: 20px; color: #495057;">🔍 搜索筛选</h3>
                <form class="search-form" id="searchForm">
                    <div class="form-group">
                        <label for="startDate">开始日期</label>
                        <input type="date" id="startDate" name="startDate">
                    </div>
                    <div class="form-group">
                        <label for="endDate">结束日期</label>
                        <input type="date" id="endDate" name="endDate">
                    </div>
                    <div class="form-group">
                        <label for="status">状态</label>
                        <select id="status" name="status">
                            <option value="">全部状态</option>
                            <option value="1">已提交</option>
                            <option value="0">未提交</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="keyword">关键词</label>
                        <input type="text" id="keyword" name="keyword" placeholder="搜索姓名、电话等">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn">🔍 搜索</button>
                        <button type="button" class="btn btn-secondary" onclick="resetForm()">🔄 重置</button>
                    </div>
                </form>
            </div>
            
            <!-- 统计信息 -->
            <div class="stats" id="stats">
                <div class="stat-card">
                    <h4>总记录数</h4>
                    <div class="number" id="totalCount">-</div>
                </div>
                <div class="stat-card">
                    <h4>今日新增</h4>
                    <div class="number" id="todayCount">-</div>
                </div>
                <div class="stat-card">
                    <h4>本月新增</h4>
                    <div class="number" id="monthCount">-</div>
                </div>
            </div>
            
            <!-- 数据列表区域 -->
            <div class="data-section">
                <div class="data-header">
                    <h3>📋 数据列表</h3>
                    <button class="refresh-btn" onclick="loadData()">🔄 刷新数据</button>
                </div>
                
                <div id="dataContent">
                    <div class="loading">
                        <div class="spinner"></div>
                        <p>正在加载数据...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 全局变量
        let currentPage = 1;
        let pageSize = 10;
        let totalPages = 0;
        let allData = [];
        
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 设置默认日期范围（最近30天）
            const today = new Date();
            const thirtyDaysAgo = new Date(today.getTime() - (30 * 24 * 60 * 60 * 1000));
            
            document.getElementById('endDate').value = today.toISOString().split('T')[0];
            document.getElementById('startDate').value = thirtyDaysAgo.toISOString().split('T')[0];
            
            // 绑定搜索表单提交事件
            document.getElementById('searchForm').addEventListener('submit', function(e) {
                e.preventDefault();
                currentPage = 1;
                loadData();
            });
            
            // 初始加载数据
            loadData();
        });
        
        // 加载数据
        async function loadData() {
            const dataContent = document.getElementById('dataContent');
            dataContent.innerHTML = `
                <div class="loading">
                    <div class="spinner"></div>
                    <p>正在加载数据...</p>
                </div>
            `;
            
            try {
                // 获取搜索参数
                const formData = new FormData(document.getElementById('searchForm'));
                const searchParams = Object.fromEntries(formData.entries());
                
                // 添加分页参数
                const requestData = {
                    ...searchParams,
                    page: currentPage,
                    size: pageSize
                };
                
                // 调用API
                const response = await fetch('https://api.jxchzj.cn/shop-api/questionnaireList', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(requestData)
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const result = await response.json();
                
                if (result.success) {
                    displayData(result.data);
                    updateStats(result.data);
                } else {
                    throw new Error(result.msg || '获取数据失败');
                }
                
            } catch (error) {
                console.error('Error:', error);
                dataContent.innerHTML = `
                    <div class="error">
                        <strong>❌ 加载失败</strong><br>
                        错误信息: ${error.message}<br>
                        请检查网络连接或联系管理员
                    </div>
                `;
            }
        }
        
        // 显示数据
        function displayData(data) {
            const dataContent = document.getElementById('dataContent');
            
            if (!data || !data.list || data.list.length === 0) {
                dataContent.innerHTML = `
                    <div class="loading">
                        <p>📭 暂无数据</p>
                    </div>
                `;
                return;
            }
            
            const list = data.list;
            totalPages = Math.ceil(data.total / pageSize);
            
            let tableHTML = `
                <div class="table-container">
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>姓名</th>
                                <th>电话</th>
                                <th>提交时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
            `;
            
            list.forEach((item, index) => {
                const rowNumber = (currentPage - 1) * pageSize + index + 1;
                const submitTime = item.createTime ? new Date(item.createTime).toLocaleString('zh-CN') : '-';
                const status = item.status === 1 ? '<span style="color: #28a745;">✓ 已提交</span>' : '<span style="color: #dc3545;">✗ 未提交</span>';
                
                tableHTML += `
                    <tr>
                        <td>${rowNumber}</td>
                        <td>${item.name || item.userName || '-'}</td>
                        <td>${item.phone || item.telephone || '-'}</td>
                        <td>${submitTime}</td>
                        <td>${status}</td>
                        <td>
                            <button class="btn" style="padding: 6px 12px; font-size: 12px;" onclick="viewDetail('${item.id}')">
                                👁️ 查看详情
                            </button>
                        </td>
                    </tr>
                `;
            });
            
            tableHTML += `
                        </tbody>
                    </table>
                </div>
            `;
            
            // 添加分页
            if (totalPages > 1) {
                tableHTML += createPagination();
            }
            
            dataContent.innerHTML = tableHTML;
        }
        
        // 创建分页
        function createPagination() {
            let paginationHTML = '<div class="pagination">';
            
            // 上一页
            paginationHTML += `
                <button onclick="changePage(${currentPage - 1})" ${currentPage === 1 ? 'disabled' : ''}>
                    ← 上一页
                </button>
            `;
            
            // 页码
            for (let i = 1; i <= totalPages; i++) {
                if (i === 1 || i === totalPages || (i >= currentPage - 2 && i <= currentPage + 2)) {
                    paginationHTML += `
                        <button onclick="changePage(${i})" class="${i === currentPage ? 'active' : ''}">
                            ${i}
                        </button>
                    `;
                } else if (i === currentPage - 3 || i === currentPage + 3) {
                    paginationHTML += '<span>...</span>';
                }
            }
            
            // 下一页
            paginationHTML += `
                <button onclick="changePage(${currentPage + 1})" ${currentPage === totalPages ? 'disabled' : ''}>
                    下一页 →
                </button>
            `;
            
            paginationHTML += '</div>';
            return paginationHTML;
        }
        
        // 切换页面
        function changePage(page) {
            if (page >= 1 && page <= totalPages) {
                currentPage = page;
                loadData();
            }
        }
        
        // 更新统计信息
        function updateStats(data) {
            if (data) {
                document.getElementById('totalCount').textContent = data.total || 0;
                // 这里可以根据实际数据结构计算今日和本月新增
                document.getElementById('todayCount').textContent = data.todayCount || 0;
                document.getElementById('monthCount').textContent = data.monthCount || 0;
            }
        }
        
        // 查看详情
        function viewDetail(id) {
            alert(`查看ID为 ${id} 的详细信息\n\n这里可以添加弹窗显示详细信息的逻辑`);
            // 可以在这里实现弹窗显示详细信息的逻辑
        }
        
        // 重置表单
        function resetForm() {
            document.getElementById('searchForm').reset();
            
            // 重新设置默认日期
            const today = new Date();
            const thirtyDaysAgo = new Date(today.getTime() - (30 * 24 * 60 * 60 * 1000));
            
            document.getElementById('endDate').value = today.toISOString().split('T')[0];
            document.getElementById('startDate').value = thirtyDaysAgo.toISOString().split('T')[0];
            
            currentPage = 1;
            loadData();
        }
        
        // 导出数据（可选功能）
        function exportData() {
            alert('导出功能开发中...');
            // 这里可以实现导出Excel或CSV的功能
        }
    </script>
</body>
</html>
